<template>
  <div class="home">
    <!-- elementUI 引入轮播图 -->
    <el-carousel class="carousel" height="300px">
      <el-carousel-item v-for="item in carouselList" :key="item.id">
        <!-- <h3 class="small">{{ item.url }}</h3> -->
        <img v-bind:src="item.url" height="300px" width="100%">
      </el-carousel-item>
    </el-carousel>
    <div class="content">
      <div class="projects">
        <div class="wrapper">
          <div class="title">精选游学项目</div>
          <div class="project" v-for="item in projectList" v-bind:key="item.id">
            <div class="pic">
              <img :src="item.figure" width="300px" @click="gotoProject(item)">
            </div>
            <div class="introduce">
              <div @click="gotoProject(item)"><strong>{{item.name}}</strong></div>
              <div @click="gotoProject(item)">{{fDate(item.beginTime)}} ~ {{fDate(item.endTime)}} </div>
              <div @click="gotoProject(item)">地区：{{item.region}}</div>
              <div @click="gotoProject(item)">{{item.introduce}}</div>
            </div>
            <div class="tutor">
              <img :src="item.teacher.userFace" width="100px">
              <div>导师：{{item.teacher.realname}}</div>
              <div>性别：{{item.teacher.gender=='male'?'男':'女'}}</div>
              <div>电话：{{item.teacher.telephone}}</div>
              <div>注册时间：{{fDate(item.teacher.registerTime)}}</div>
            </div>
          </div>
          <!-- background="#F5F7FF" -->
          <el-pagination small layout="prev, pager, next" :page-size="2" :total="3"  @current-change="changePage">
          </el-pagination>
        </div>
      </div>
      <div class="articles">
        <div class="wrapper">
          <div class="title">学生风采</div>
          <div class="article">
            <div class="article1" v-for="item in categoryList" :key="item.id" @click="gotoArticle(item)">
              <div class="pic">
                <img :src="item.cover" width="292px">
              </div>
              <div class="introduce">
                <div>{{item.title}}</div>
                <div>{{fDate(item.publishTime)}}</div>
                <div>作者id：{{item.authorId||'匿名'}}</div>
                <div>⭐{{item.thumpUp}}</div>
                <button class="thumbUp" @click.stop="thumbUpById(item.id)">赞</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="questions">
        <div class="wrapper">
          <div class="title">常见问题</div>
          <div class="question">
            <div class="title_sub">孩子年龄太小去暑期游学合适吗？夏令营的时候怎么保障安全？</div>
            <p> 其实年龄小的时候多出去是非常有利于孩子的身心的，能够在成长阶段多看看外面的世界、多吸收不同的文化、学习不同的思维方式。孩子的适应性和应变能力有的时候比大人想象的要强很多，但是在家里由于长辈的呵护而得不到锻炼，出去和别的小朋友一起学习独立，学习怎么成为集体的一分子，学习平等待人，这对少儿和青少年的长成都很有帮助。大多数家长担心的会是小孩子出去的安全问题，所以建议在选择夏令营团的时候务必仔细。英孚在这方面有50多年的经验，出发会有国内领队带团；而国外夏令营的学校都是英孚自己的学校，海外的领队也是学校精心挑选的人，全程都是英孚的工作人员负责。家长甚至可以通过MyEF系统登陆看到整个夏令营团队的课程、活动规划、寄宿家庭信息等，全程追踪，而领队也会随时和家长保持联系。 </p>
            <div class="questionPic">
              <img src="http://121.199.29.84/xxtx-ui/static/img/question1.e525c7f5.jpg" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {get,post} from '../utils/request';
import {fmtDate} from '../filters/index';
export default {
  // name:'Home',
  data() {
    return {
      carouselList:[],
      projectList:[],
      categoryList:[]
    }
  },
  created(){
    this.carouselFillAll();
    this.projectByPageQuery();
    this.categoryArticlesFill();
  },
  methods:{
    // 查询所有轮播图
    carouselFillAll(){
      get('/index/carousel/findAll').then(resp=>{
        // console.log(resp.data);
        this.carouselList = resp.data;
      })
    },
    // 分页查询所有项目
    projectByPageQuery(){
      get('/index/project/pageQuery',{page:1,pageSize:2}).then(resp=>{
        this.projectList = resp.data.list;
      })
    },
    // 换页
    changePage(page){
      get('/index/project/pageQuery',{page,pageSize:2}).then(resp=>{
        this.projectList = resp.data.list;
      })
    },
    // 添加项目跳转到详情页
    gotoProject(item){
      this.$router.push({path:'/project',query:{id:item.id,name:item.name,region:item.region,beginTime:this.fDate(item.beginTime),endTime:this.fDate(item.endTime),details:item.details}});
    },
    // 查询所有资讯
    categoryArticlesFill(){
      get('/index/article/findHotArticles').then(resp=>{
        this.categoryList = resp.data;
      })
    },
    // 点击咨询跳转到内容页
    gotoArticle(item){
      // this.$router,replace('/article');    通过replace跳转，跳转后无法回退
      // 通过params传数据 这里不能用path路径，只能用name   类似post
      // this.$router.push({name:'Article',params:{content}});
      // 通过query传数据  类似get
      this.$router.push({path:'/article',query:{title:item.title,time:this.fDate(item.publishTime),readTimes:item.readTimes,thumpUp:item.thumpUp,content:item.content}});
    },
    // 点赞
    thumbUpById(id){
      get('/index/article/thumbUp',{id:id}).then(resp=>{
        this.categoryArticlesFill();
      })
    },
    // 将时间戳转换成年月日格式
    fDate(time){
      return fmtDate(time);
    }
  }
}
</script>
<style lang="less">
  .home{
    .carousel{
      background-color: cornsilk;
    }
    .content{
      .projects{
        .wrapper{
          width: 80%;
          .title{
            font-size: 20px;
            line-height: 4em;
            border-bottom: 1px solid #f4f4f4;
          }
          .project{
            padding: 1em 0;
            border-bottom: 2px solid #f4f4f4;
            display: flex;
            .pic{
              width: 300px;
              height: 200px;
              background-color: #f4f4f4;
              border-radius: 5px;
              overflow: hidden;
              cursor: pointer;
            }
            .introduce{
              flex: 1;
              padding: 0 2em;
              // background-color: aquamarine;
              div{
                line-height: 2em;
                cursor: pointer;
              }
            }
            .tutor{
              width: 200px;
              height: 170px;
              background-color: #f4f4f4;
              img{
                margin: 10px auto;
                display: block;
              }
              div{
                width: 150px;
                margin: 0 auto;
              }
            }
          }
        }
      }
      .articles{
        .wrapper{
          width: 80%;
          .title{
            font-size: 20px;
            line-height: 4em;
            color: #333;
          }
          .article{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding-bottom: 2em;
            .article1{
              flex-basis: 24%;
              height: 328px;
              margin-bottom: 1em;
              cursor: pointer;
              .pic{
                width: 100%;
                height: 160px;
                // background-color: aqua;
                overflow: hidden;
              }
              .introduce{
                padding: 1em;
                .thumbUp{
                  width: 70px;
                  height: 35px;
                }
              }
            }
            .article1:hover{
              background-color: #f4f4f4;
              box-shadow: 5px;
            }
          }
        }
      }
      .questions{
        .wrapper{
          width: 80%;
          .title{
            font-size: 20px;
            font-weight: bold;
            line-height: 2em;
            color: #333;
          }
          .question{
            .title_sub{
              font-size: 16px;
              font-weight: bold;
              line-height: 2em;
              color: #333;
            }
            p{
              line-height: 2em;
              text-indent: 2em;
              color: #999;
            }
            .questionPic{
              width: 100%;
              height: 500px;
            }
          }
        }
      }
    }
  }
</style>